@using Passwordless.AdminConsole.Services.AuthenticatorData
@using Passwordless.Common.Extensions

@inject IAuthenticatorDataProvider AuthenticatorDataProvider
@inject IHttpContextAccessor HttpContextAccessor
@inject NavigationManager NavigationManager

@if (Items != null)
{
    <ConfirmEditForm FormName="@ManageCredentialFormName" name="@ManageCredentialFormName" Model="@ManageCredentialForm" OnSubmit="OnManageCredentialSubmittedAsync">
        <div id="credentials-list" class="flex flex-col gap-10">
            <div>
                <div class="flex flex-wrap gap-5 mb-3">
                    @foreach (var cred in GetItems())
                    {
                        <div class="@(cred.IsNew() ? "credential-card-new" : "credential-card")">
                            <div class="px-4 py-5 sm:px-6">
                                <h3>@cred.Title</h3>
                                @if (!string.IsNullOrEmpty(cred.SubTitle))
                                {
                                    <p class="mt-1 max-w-2xl text-sm text-gray-500">@cred.SubTitle</p>
                                }
                                <dl class="mt-2">
                                    <CardSummaryProperty Label="Created:" Value="cred.CreatedAt"></CardSummaryProperty>
                                    <CardSummaryProperty Label="Last used:" Value="cred.LastUsedAt"></CardSummaryProperty>
        
                                    @if (!HideDetails)
                                    {
                                        <div class="credential-card-summary-footer">
                                            <button
                                                type="button"
                                                name="show-credential-details-btn"
                                                credential-summary-only="true"
                                                credential-descriptor-id="@cred.DescriptorId"
                                                class="block rounded py-1 text-xs font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
                                                Show more
                                            </button>
                                            @if (cred.IsNew())
                                            {
                                                <Badge credential-summary-only="true" credential-descriptor-id="@cred.DescriptorId" Message="New" Variant="ContextualStyles.Success"/>
                                            }
                                        </div>
                                    }
                                </dl>
                            </div>
                            @if (!HideDetails)
                            {
                                <div credential-details-only="true" credential-descriptor-id="@cred.DescriptorId" class="border-t border-gray-200 px-4 py-5 sm:px-6 hidden">
                                    <dl class="grid grid-cols-1 gap-x-4 gap-y-8 sm:grid-cols-2">
                                        <CardDetailsProperty Label="Credential Id" Value="@cred.DescriptorId" class="sm:col-span-2" />
                                        <CardDetailsProperty Label="Public Key" Value="@cred.PublicKey.ToBase64Url()" class="sm:col-span-2" />
                                        <CardDetailsProperty Label="Type" Value="@cred.AttestationFmt" class="sm:col-span-1" />
                                        <CardDetailsProperty Label="Counter" Value="@cred.SignatureCounter" class="sm:col-span-1" />
                                        <CardDetailsProperty Label="RPID" Value="@cred.RPID" class="sm:col-span-1" />
                                        <CardDetailsProperty Label="Origin" Value="@cred.Origin" class="sm:col-span-1" />
                                        <CardDetailsProperty Label="AaGuid" Value="@cred.AaGuid" class="sm:col-span-2" />
                                        <CardDetailsProperty Label="Discoverable" Value="@(cred.IsDiscoverable.HasValue ? cred.IsDiscoverable.Value : "Unknown")" class="sm:col-span-1" />
                                        <CardDetailsProperty Label="Backup State / Synced" Value="@(cred.BackupState.HasValue ? cred.BackupState.Value : "Unknown")" class="sm:col-span-1" />
                                        <CardDetailsProperty Label="Backup Eligibility" Value="@(cred.IsBackupEligible.HasValue ? cred.IsBackupEligible.Value : "Unknown")" class="sm:col-span-1" />
                                    </dl>
                                </div>
                                <div credential-details-only="true" credential-descriptor-id="@cred.DescriptorId" class="border-t border-gray-200 px-4 py-5 sm:px-6 flex hidden">
                                    <button
                                        type="button"
                                        name="hide-credential-details-btn"
                                        credential-descriptor-id="@cred.DescriptorId"
                                        class="block mr-auto rounded py-1 text-xs font-semibold focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">
                                        Show less
                                    </button>
                                    <ConfirmButton ConfirmTitle="Delete credential"
                                                   ConfirmDescription="Are you sure you want to delete this credential?"
                                                   ConfirmButtonText="Delete"
                                                   name="ManageCredentialForm.CredentialId"
                                                   type="submit"
                                                   value="@cred.DescriptorId"
                                                   class="block ml-auto rounded bg-red-600 py-1 px-2 text-xs font-semibold text-white shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600">Remove</ConfirmButton>
                                </div>
                            }
                        </div>
                    }
                </div>
            </div>
        </div>
    </ConfirmEditForm>
}

<SecureScript>
document.getElementsByName("hide-credential-details-btn").forEach(function (el) {
    el.addEventListener("click", function (e) {
        var credentialDescriptorId = e.target.getAttribute("credential-descriptor-id");
        var details = document.querySelectorAll(`[credential-details-only="true"][credential-descriptor-id="${credentialDescriptorId}"]`);
        var summary = document.querySelectorAll(`[credential-summary-only="true"][credential-descriptor-id="${credentialDescriptorId}"]`);
        details.forEach(function (el) {
            el.classList.add("hidden");
        });
        summary.forEach(function (el) {
            el.classList.remove("hidden");
        });
    });
});
document.getElementsByName("show-credential-details-btn").forEach(function (el) {
    el.addEventListener("click", function (e) {
        var credentialDescriptorId = e.target.getAttribute("credential-descriptor-id");
        var details = document.querySelectorAll(`[credential-details-only="true"][credential-descriptor-id="${credentialDescriptorId}"]`);
        var summary = document.querySelectorAll(`[credential-summary-only="true"][credential-descriptor-id="${credentialDescriptorId}"]`);
        details.forEach(function (el) {
            el.classList.remove("hidden");
        });
        summary.forEach(function (el) {
            el.classList.add("hidden");
        });
    });
});
</SecureScript>